<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon"
	href="${pageContext.request.contextPath}/resources/images/my.ico"
	type="image/x-icon" />
<link rel="shortcut icon"
	href="${pageContext.request.contextPath}/resources/images/my.ico"
	type="image/x-icon" />
<link rel="bookmark"
	href="${pageContext.request.contextPath}/resources/images/my.ico"
	type="image/x-icon" />
<title>恒铸智能柜管理平台</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta charset="utf-8">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/layui/css/layui.css"
	media="all" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/css/index.css"
	media="all" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/js/index.js"></script>
</head>
<style>
.header {
	position: fixed;
	top: 0;
	width: 100%;
}

.clildFrame.layui-tab-content {
	top: 50px;
}

.layui-layout-admin .layui-body {
	bottom: 0px;
}
</style>
<body class="main_body">
	<div class="layui-layout layui-layout-admin">
		<!-- 顶部 -->
		<div class="layui-header header">
			<div class="layui-main mag0">
				<a href="http://www.cdhengzhu.com/" target="target" class="logo">恒铸智能柜管理平台</a>
				<!-- 顶部右侧菜单 -->
				<ul class="layui-nav top_menu">
					<li id="pc"><a
						href="http://wechat.schengzhu.com/swagger-ui.html" target="target"
						style="margin-right: 10px; color: #009688;"><b>API中心</b></a> <a
						href="javascript:;"><img
							src="${pageContext.request.contextPath}/resources/images/2.gif"
							class="layui-nav-img userAvatar" width="35" height="35"><cite
							class="adminName">${loginUser.realName}</cite></a>
						&nbsp;&nbsp;&nbsp;&nbsp;<a href="/logout"><img
							src="${pageContext.request.contextPath}/resources/images/tuichu.png"><cite>注销</cite></a>
					</li>
					<li class="layui-nav-item" id="userInfo"><a
						href="javascript:;"><img src="/resources/images/2.gif"
							class="layui-nav-img userAvatar" width="35" height="35"><cite
							class="adminName">${loginUser.realName}</cite></a>
						<dl class="layui-nav-child">
							<dd>
								<a href="http://wechat.schengzhu.com/swagger-ui.html"
									target="target"><i class="seraph icon-tuichu"></i><cite>API中心</cite></a>
							</dd>
							<dd>
								<a href="/logout" class="signOut"><i
									class="seraph icon-tuichu"></i><cite>退出</cite></a>
							</dd>
						</dl></li>
				</ul>
			</div>
		</div>
		<!-- 左侧导航 -->
		<div class="layui-side layui-bg-black">
			<div class="navBar layui-side-scroll" id="navBar">
				<ul class="layui-nav layui-nav-tree">
					<li class="layui-nav-item layui-this"></li>
				</ul>
			</div>
		</div>
		<!-- 右侧内容 -->
		<div class="layui-body layui-form">
			<div class="layui-tab mag0" lay-filter="bodyTab" id="top_tabs_box">
				<ul class="layui-tab-title top_tab" id="top_tabs">
					<li class="layui-this" lay-id=""><i class="layui-icon">&#xe68e;</i>
						<cite>后台首页</cite></li>
				</ul>
				<ul class="layui-nav closeBox">
					<li class="layui-nav-item"><a href="javascript:;"><i
							class="layui-icon caozuo">&#xe643;</i> 页面操作</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="javascript:;" class="refresh refreshThis">刷新当前</a>
							</dd>
							<dd>
								<a href="javascript:;" class="closePageOther">关闭其他</a>
							</dd>
							<dd>
								<a href="javascript:;" class="closePageAll">关闭全部</a>
							</dd>
						</dl></li>
				</ul>
				<div class="layui-tab-content clildFrame">
					<div class="layui-tab-item layui-show">
						<div class="userInfor">
							<h2 style="margin: auto; display: black; width: 100px;">
								<b style="margin-top: 20px; display: block;">我的设备</b>
							</h2>
							<span>箱子总数：<b style="color: #01AAED">${num.allNum }</b></span> <span>异常数：<b
								style="color: #FF5722">${num.errorNum }</b></span> <span
								class="border-right">实时异常率：<b style="color: #009688">${num.errorRate}%</b></span>
							</br> <span>已使用数：<b style="color: #01AAED">${num.usedNum }</b></span>
							<span>未使用数：<b style="color: #FF5722">${num.unusedNum }</b></span>
							<span class="border-right">实时使用率：<b style="color: #009688">${num.usageRate}%</b></span>
						</div>
						<style type="text/css">
.result-xy {
	height: 248px;
	width: 90%;
	max-width: calc(100% - 40px);
	margin: auto;
	margin-top: 80px;
	font-size: 0;
	border-top: 1px solid #E0E2E6;
	border-bottom: 1px solid #E0E2E6;
	background: linear-gradient(to top, #E0E2E6, #E0E2E6 1px, transparent 1px);
	background-size: 100% 50px;
	position: relative;
	text-align: center;
}
/* .result-xy::after {content: '100\A 80\A 60\A 40\A 20 \A 0';white-space: pre-wrap;position: absolute;font-size: 14px;line-height: 50px;top: -26px; left: -1.5em;} */
.result-bg {
	display: inline-block;
	height: 100%;
	position: relative;
	top: -19px;
}

.result-bg+.result-bg {
	margin-left: 16.66%;
}

.result-bg::after {
	content: attr(data-month);
	position: absolute;
	bottom: -4em;
	left: -3em;
	width: 70px;
	text-align: center;
	font-size: 12px;
	color: gray;
}

.result-bar {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
}

.result-bar>s {
	position: absolute;
	width: 6px;
	height: 6px;
	background-color: #fff;
	color: #01AAED;
	border: 2px solid;
	border-radius: 50%;
	top: 15px;
	left: 0;
	right: 0;
}

.result-bar i[line] {
	position: absolute;
	box-sizing: border-box;
	border-left: 3px solid #fff;
	border-right: 3px solid #fff;
	height: 2px;
	background-color: #01AAED;
	transform-origin: left center;
	left: 50%;
	top: 50%;
	margin-top: -1px;
	-ms-pointer-events: none;
	pointer-events: none;
	z-index: 1;
}

.result-bar input {
	font-size: xx-small;
	border: 0px;
	background-color: white;
	width: 40px;
	color: red;
	margin-left: -80%;
}
.boxShadow{
	box-shadow: 0px 2px 10px -5px #009688;padding:20px 0px 50px 0px;margin:15px 0px 15px 0px;
}
</style>			<div class="boxShadow">
						<h3 class="title">近七日使用统计图</h3>
						<center><h3>所有</h3></center>
						<div id="chartX" class="result-xy">
							<c:forEach items="${list }" var="item">
								<div class="result-bg" data-month="${item.today}">
									<span class="result-bar" style="height: ${item.num/max*100}%"><s
										title="${item.num}"></s><input value="${item.num}" disabled></input></span>
								</div>
							</c:forEach>
						</div>
					</div>
					<div class="boxShadow">
						<h3 class="title" style="width:50px">大柜</h3>
						<div id="chartXBig" class="result-xy">
							<c:forEach items="${listBig }" var="item">
								<div class="result-bg" data-month="${item.today}">
									<span class="result-bar" style="height: ${item.num/maxBig*100}%"><s
										title="${item.num}"></s><input value="${item.num}" disabled></input></span>
								</div>
							</c:forEach>
						</div>
					</div>
					<div class="boxShadow">
						<h3 class="title" style="width:50px">中柜</h3>
						<div id="chartXMiddle" class="result-xy">
							<c:forEach items="${listMiddle }" var="item">
								<div class="result-bg" data-month="${item.today}">
									<span class="result-bar" style="height: ${item.num/maxMiddle*100}%"><s
										title="${item.num}"></s><input value="${item.num}" disabled></input></span>
								</div>
							</c:forEach>
						</div>
						</div>
					<div class="boxShadow">
						<h3 class="title" style="width:50px">小柜</h3>
						<div id="chartXLittle" class="result-xy">
							<c:forEach items="${listLittle }" var="item">
								<div class="result-bg" data-month="${item.today}">
									<span class="result-bar" style="height: ${item.num/maxLittle*100}%"><s
										title="${item.num}"></s><input value="${item.num}" disabled></input></span>
								</div>
							</c:forEach>
						</div>
					</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 移动导航 -->
	<div class="site-tree-mobile">
		<i class="layui-icon">&#xe602;</i>
	</div>
	<div class="site-mobile-shade"></div>
	<script type="text/javascript">
	pushHistory();
	window.addEventListener("popstate", function(e) {
		window.history.forward(1) 
		//WeixinJSBridge.call('closeWindow');
	}, false);
	function pushHistory() {
		var state = {
			title: "title",
			url: "#"
		};
		window.history.pushState(state, "title", "#");
	}
	
	var eleDots = document.querySelectorAll('#chartX s');
	var chartXBig = document.querySelectorAll('#chartXBig s');
	var chartXMiddle = document.querySelectorAll('#chartXMiddle s');
	var chartXLittle = document.querySelectorAll('#chartXLittle s');

	// 这个是折线方法
	var fnLineChart = function (eles) {
	    [].slice.call(eles).forEach(function (ele, index) {
	        var eleNext = eles[index + 1];
	        if (!eleNext) { return;  }
	        var eleLine = ele.querySelector('i');
	        if (!eleLine) {
	            eleLine = document.createElement('i');
	            eleLine.setAttribute('line', '');
	            ele.appendChild(eleLine);
	        }
	        // 记录坐标
	        var boundThis = ele.getBoundingClientRect();
	        // 下一个点的坐标
	        var boundNext = eleNext.getBoundingClientRect();
	        // 计算长度和旋转角度
	        var x1 = boundThis.left, y1 = boundThis.top;
	        var x2 = boundNext.left, y2 = boundNext.top;
	        // 长度
	        var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
	        // 弧度(角度)
	        var radius = Math.atan((y2 - y1) / (x2 - x1));
	        // 设置线条样式
	        eleLine.style.width = distance + 'px';
	        eleLine.style.msTransform = 'rotate('+ radius +'rad)';
	        eleLine.style.transform = 'rotate('+ radius +'rad)';
	    });
	};

	// 调用折线方法
	fnLineChart(eleDots);
	fnLineChart(chartXBig);
	fnLineChart(chartXMiddle);
	fnLineChart(chartXLittle);
	
	// 浏览器尺寸改变时候
	window.addEventListener('resize', function () {
	    fnLineChart(eleDots);
	    fnLineChart(chartXBig);
	    fnLineChart(chartXMiddle);
		fnLineChart(chartXLittle);
	});
</script>
	<link rel="icon" href="favicon.ico">
</body>
</html>